<template>
  <div :class="['design-form-row', inline && 'design-form-row-inline' || undefined]">
    <div :style="labelStyle" class="design-form-label" :class="required?'required':''">
      {{ label }}：
    </div>
    <div class="design-form-body">
      <slot/>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'Row',
  props: {
    labelWidth: createProps(String, 'fit-content'),
    label: createProps(String),
    inline: createProps(Boolean),
    required: createProps(Boolean, false)
  },
  computed: {
    labelStyle() {
      return {
        width: this.labelWidth,
      };
    },
  }
};
</script>
<style>
.design-form-row {
  display: flex;
  flex-flow: column;
  margin-bottom: 10px;
}

.design-form-row-inline {
  flex-flow: row;
}

.design-form-label {
  text-align: right;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 5px;
}

.required:before {
  color: red;
  content: '*';
}

.design-form-body > * {
  width: 100% !important;
}

.design-form-body {
  flex: 1;
}
</style>
